import { reactive, ref, onMounted, onUnmounted, watch } from 'vue';
import { useDebounceFn } from '@vueuse/core';
import { useRouter } from 'vue-router'

import useApi from '@/amtf/api/增查api';
import *  as util from '@/amtf/utils'
import 播音 from '@/amtf/utils/播音';
import { ElMessage, ElMessageBox } from 'element-plus'
import use路由 from '@/amtf/hooks/use路由';

export default function (cfg = {}) {
  console.log(`use详情_抽屉式 执行 ing👇`)
  const to详情页否 = cfg.to详情页否 ? cfg.to详情页否 : false
  const list = cfg.list
  const router = useRouter()

  // const 子表ref = cfg.子表ref
  // console.log(`子表ref 👉`, 子表ref)
  const a = reactive({
    变化了: false,
  })
  // const 变化了 = ref(false)
  let 监听变化 = true

  const 单项 = reactive({})
  const 弹窗否 = ref(false)
  const formRef = ref(false)
  const api = useApi(cfg.url);
  const 路由 = use路由();

  const 初始化 = async () => {
    console.log(`初始化 ing👇`)
    a.变化了 = false
    监听变化 = false
    const id = 路由.currentRoute.query.id
    const res = await api.查({ id })
    console.log(`res 👉`, res)
    if (res.code === 0) {
      util.对象重予(单项, res.data)
      if (cfg.展示前处理) {
        // console.log(`单项 👉`,单项)
        cfg.展示前处理(单项)
      }
      查外键关联记录集()
    }
    // 监听变化 = true
  }
  初始化()

  const 外键关联记录集 = reactive({})
  const 外键组 = cfg.外键组 ? cfg.外键组 : []
  外键组.push({
    字段名: "创建者"
  })
  for (const 外键 of 外键组) {
    // 予初始值,防止vue模板报错
    外键关联记录集[外键.字段名] = {}
  }

  async function 查外键关联记录集(params) {
    if (!外键组) return
    for (const 外键 of 外键组) {
      // 予初始值,防止vue模板报错
      let id = 单项[外键.字段名]
      外键.id = `${id}`
    }
    const 筛选组 = [{
      字段名: "姓名",
      比较运算符: "like",
      字段值: "999",
    }]
    const res = await api.查外键关联记录集({ 外键组, 筛选组, 用户id: 999 })
    console.log(`查外键关联记录集res 👉`, res)
    if (res.code === 0) {
      util.对象重予(外键关联记录集, res.data)
    }
  }
  // 查外键关联记录集()

  const 新增子级 = (父级id) => {
    let 单项模板 = util.单项模板(list.组件id)
    单项模板.父级id = 父级id
    util.对象重予(单项, 单项模板)
    弹窗否.value = true
  }

  const 复制 = (单项a = 单项) => {
    console.log(`复制 单项a 👉`, 单项a)
    监听变化 = false
    let 单项模板 = util.深拷贝(单项a)
    单项模板.id = 0
    util.对象重予(单项, 单项模板)
    if (cfg.复制后处理) {
      cfg.复制后处理(单项)
    }
    弹窗否.value = true
    // 监听变化 = true
  }

  const 提交 = async () => {
    formRef.value?.validate(async (valid, fields) => {
      // console.log(`fields 👉`, fields)
      // console.log(`valid 👉`, valid)
      if (!valid) {
        播音('错误')
        ElMessage({
          type: 'error',
          message: `内容不符合要求 `
        })
        return
      }

      let res
      // console.log(`单项 👉`, 单项)
      if (cfg.提交前处理) {
        // console.log(`单项 👉`,单项)
        cfg.提交前处理(单项)
      }
      // return
      if (!单项.id) {
        res = await api.增(单项)
      } else {
        res = await api.改(单项)
      }
      if (res.code === 0) {
        播音('提交')
        ElMessage({
          type: 'success',
          message: '操作完成'
        })
        关窗()
        // use取字段候选值集(a);
        list.查多个()
        list.取字段候选值集()
      }
    }).catch(({ errors, fields }) => {
      console.log(`errors 👉`, errors)
    })
  }

  const 删 = async () => {
    ElMessageBox.confirm('确定要删除吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      const res = await api.删({ id: 单项.id })
      if (res.code === 0) {
        ElMessage({
          type: 'success',
          message: '删除成功'
        })
      }
      播音('删除')
    }
    ).catch(() => { })
  }

  onMounted(() => {
    // console.log('绑定快捷键ing: ');
    document.addEventListener('keydown', handleKeyDown);
  });

  onUnmounted(() => {
    // console.log('注销 绑定快捷键ing: ');
    document.removeEventListener('keydown', handleKeyDown);
  });

  function handleKeyDown(event) {
    // console.log(`handleKeyDown ing👇`)
    // console.log(`event 👉`, event)
    if (event.ctrlKey && event.key === 's') {
      // console.log('Ctrl + S 被按下了！');
      if (!弹窗否.value) return
      event.preventDefault();
      提交()
    }
    if (event.esc) {
      // console.log('Ctrl + S 被按下了！');
      if (!弹窗否.value) return
      // event.preventDefault();
      关窗()
    }
  }

  const 关窗 = () => {
    console.log(`关窗 ing👇`)
    弹窗否.value = false
  }
  // 验证规则
  const rule模板 = {
    行业: [{
      required: true,
      message: '必填项',
      trigger: ['input', 'blur'],
    },
    ],
    客户单位: [{
      required: true,
      message: '必填项',
      trigger: ['input', 'blur'],
    },
    ],
    图片: [{
      required: true,
      message: '',
      trigger: ['input', 'blur'],
    },
    ],
  }
  const rule = {}
  if (cfg.rule) {
    Object.assign(rule, cfg.rule)
  }

  watch(单项, (newValue, oldValue) => {
    console.log(`单项变化 ing👇`)
    console.log(`监听变化 👉`, 监听变化)
    if (监听变化) {
      a.变化了 = true
    }
    监听变化 = true
  })

  return {
    外键关联记录集,
    a,
    删,
    // 变化了,
    复制,
    新增子级,
    关窗,
    formRef,
    rule,
    提交,
    弹窗否,
    单项,
    初始化
  }
}